<template>
  <div class="home container">
    <div class="hero">
      <h1>Second AI Agent</h1>
      <p>极客 · 霓虹 · 玻璃质感。一个集合多智能体应用的实验室。</p>
      <div class="actions">
        <router-link class="btn primary" to="/pet-expert">AI 宠物专家</router-link>
        <router-link class="btn ghost" to="/super-agent">AI 超级智能体</router-link>
      </div>
    </div>
    <div class="grid">
      <router-link class="tile card-neo" to="/pet-expert">
        <div class="title">AI 宠物专家</div>
        <div class="desc">实时流式 · 会话隔离 · 宠物行为建议</div>
      </router-link>
      <router-link class="tile card-neo" to="/super-agent">
        <div class="title">AI 超级智能体</div>
        <div class="desc">多工具协作 · Agent 规划 · 任务分解</div>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.home { padding: 40px 0 24px; }
.hero { text-align: center; margin: 40px 0; }
.hero h1{ font-size: 52px; letter-spacing: 1px; margin: 0 0 10px; }
.hero p{ color: #bcd; margin: 0 0 20px; }
.actions{ display: flex; gap: 12px; justify-content: center; }
.btn{ padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.btn.primary{ background: linear-gradient(135deg, var(--primary), var(--accent)); color: #111; font-weight: 600; }
.btn.ghost{ border: 1px solid var(--border); color: var(--text); }
.grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 36px; }
.tile{ padding: 18px; text-decoration: none; color: var(--text); }
.tile .title{ font-weight: 700; margin-bottom: 6px; }
.tile .desc{ color: #c8d1e0; font-size: 14px; }
</style>



